¡Hola 👋! Espera mientras comienza la sesión.

Antes que todo, ¿cómo están?

Visualización de Información

IIC2026 2021-2

Utilidades en D3.js I

Visualización de Información

IIC2026 2021-2

Contenido

Contenido


1. Cargado de datos en D3.js

2. Escalas de D3.js

3. Ejes de D3.js


const svg = d3.select("body").append("svg");

function joinDeDatos(datos) {
  svg.attr("width", 50 + datos.length * 100).attr("height", 500);

  svg
    .selectAll("rect")
    .data(datos)
    .join("rect")
    .attr("width", 50)
    .attr("fill", "magenta")
    .attr("height", (d) => d)
    .attr("x", (_, i) => 50 + i * 100);
}

const datos = [10, 20, 30, 40];
joinDeDatos(datos);

          

const width = 600;
const height = 400;
const margin = {
  top: 70,
  bottom: 70,
  right: 30,
  left: 30,
};

const svg = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const contenedor = svg
  .append("g")
  .attr("transform", `translate(${margin.left} ${margin.top})`);

function joinDeDatos(datos) {
  const maximaFrecuencia = d3.max(datos, (d) => d.frecuencia);

  const escalaAltura = d3
    .scaleLinear()
    .domain([0, maximaFrecuencia])
    .range([0, height - margin.top - margin.bottom]);

  const escalaY = d3
    .scaleLinear()
    .domain([0, maximaFrecuencia])
    .range([height - margin.top - margin.bottom, 0]);

  const ejeY = d3.axisLeft(escalaY);

  svg
    .append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`)
    .call(ejeY)
    .selectAll("line")
    .attr("x1", width - margin.right - margin.left)
    .attr("stroke-dasharray", "5")
    .attr("opacity", 0.5);

  const escalaX = d3
    .scaleBand()
    .domain(datos.map((d) => d.categoria))
    .rangeRound([0, width - margin.right - margin.left])
    .padding(0.5);

  const ejeX = d3.axisBottom(escalaX);

  svg
    .append("g")
    .attr("transform", `translate(${margin.left}, ${height - margin.bottom})`)
    .call(ejeX)
    .selectAll("text")
    .attr("font-size", 20);

  contenedor
    .selectAll("rect")
    .data(datos)
    .join("rect")
    .attr("width", escalaX.bandwidth())
    .attr("fill", "magenta")
    .attr("height", (d) => escalaAltura(d.frecuencia))
    .attr("x", (d) => escalaX(d.categoria))
    .attr("y", (d) => escalaY(d.frecuencia));
}

d3.json("datos.json")
  .then((datos) => {
    console.log(datos);
    joinDeDatos(datos);
  })
  .catch((error) => console.log(error));

¡Actividad grupal!

¡Actividad grupal!

Cada grupo asignado a una Sala de Zoom debe completar en conjunto un programa de JavaScript que extiende un documento HTML. Los objetivos a lograr como grupo son:

  • Escribir una lista no ordenada en el documento HTML con los nombres de las personas que forman el grupo.
  • Crear un programa que genere un gráfico de puntos conectados a partir de un archivo de datos provisto. Este debe incluir ejes, y debería usar escalas.

¡Actividad grupal!

Cada grupo asignado a una Sala de Zoom debe completar en conjunto un programa de JavaScript que extiende un documento HTML. Los objetivos a lograr como grupo son:

  • Escribir una lista no ordenada en el documento HTML con los nombres de las personas que forman el grupo.
  • Crear un programa que genere un gráfico de puntos conectados a partir de un archivo de datos provisto. Este debe incluir ejes, y debería usar escalas.

¡Actividad grupal!


Les recomendamos que por grupo asignen:

  • Al menos una persona que tenga el material del curso y documentación de D3.js a mano para consultarla.
  • Al menos una persona pendiente de las dudas que surjan para solicitar ayuda durante y al final de la actividad.
  • Al menos una persona que se encargue de escribir y extender el documento HTML y programa JavaScript.
  • El resto puede apoyar a quienes escriban o a otros roles.

¡Actividad grupal!


Para colaborar en el código, pueden:

El equipo docente les preparó salas en Coding Rooms. Para ingresar y colaborar deben entrar a un enlace y luego:

  1. Por defecto, entrarán a la sala solo con permiso de lectura, por lo que un ayudante les asignará el rol de editor a les primeres que entren.
  2. Si ya tienen rol de editor, pueden darle este rol a otros estudiantes. Para ello:
    1. Presionen el botón ‘Share’ en la parte superior derecha.
    2. En el cuadro desplegado, cambia el rol de todes les ‘Viewer’ a ‘Editor’ (Si no salen en el cuadro desplegado, recarguen la página)
  3. Para poder ver cómo va quedando su código, despliguen la vista de navegador en el botón ‘View Webpage’ de la parte inferior derecha.
  4. ¡Listo! Ya pueden ponerse a trabajar conjuntamente en su HTML y SVG.

¡Actividad grupal!

Salas y documentos asignados:

Resultados de actividad grupal

¡Visualización del día!


Visualización de consumo de café por un año

Propuesta por ayudante Daniela Concha.

(Fuente: Café diario por Jaime Serra)

Próximos eventos:


Mañana es la Ayudantía 5 sobre Inicios de D3.js: selecciones, data join y utilidades I.


Sesión de jueves 23 de septiembre revisamos Utilidades en D3.js II.


Domingo 26 de septiembre (20:00:00) termina plazo de Hito 1.

Utilidades en D3.js I

Visualización de Información

IIC2026 2021-2


¡Deja tus preguntas en los comentarios!